<!-- 操作记录 -->
<template>
  <div class="ky-container">
    <div @click="closeRight">
      <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
        <el-form ref="ruleForm" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" :rules="rules">
          <el-form-item label="医院名称" prop="hospitalCode" label-width="80px">
            <el-select
              size="small"
              class="param-type_input"
              v-model="formData.hospitalCode"
              filterable
              placeholder="请选择"
              @change="handleChange('hospital')">
              <el-option
                v-for="(item,index) in mx_hospitalList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="影像区域" label-width="82px">
            <el-select size="small" class="param-type_input" v-model="formData.depArea" multiple placeholder="请选择" clearable collapse-tags @change="handleChange('depArea')">
              <el-option
                v-for="(item,index) in depAreaOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查部门" label-width="82px">
            <el-select size="small" class="param-type_input" v-model="formData.dep" multiple placeholder="请选择" clearable collapse-tags @change="handleChange('dep')">
              <el-option
                v-for="(item,index) in scheduledDepOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查设备" label-width="82px">
            <el-select size="small" class="param-type_input" v-model="formData.modality" multiple placeholder="请选择" clearable collapse-tags @change="handleChange('modality')">
              <el-option
                v-for="(item,index) in modalityOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查机房" label-width="82px">
            <el-select size="small" class="param-type_input" v-model="formData.checkRoom" multiple placeholder="请选择" clearable collapse-tags>
              <el-option
                v-for="(item,index) in checkRoomOptions"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作用户" prop="operatorName" label-width="82px">
            <el-input class="param-type_input" v-model="formData.operatorName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="操作类型" label-width="82px">
            <el-select size="small" class="param-type_input" v-model="formData.operatorStatus" multiple placeholder="请选择" clearable collapse-tags>
              <el-option
                v-for="item in operateTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="记录时间" prop="timeRange">
            <el-date-picker
              v-model="formData.timeRange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="m-l-0 click-button" size="small" icon="el-icon-search" @click="search">查询</el-button>
            <el-button class="m-l-0 click-button" size="small" icon="el-icon-refresh-right" @click="resetParam" plain>重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="quickfilter-content ky-mt10">
        <el-card v-show="quickFilterStatus" shadow="hover" class="qf-sidebar ky-card ky-card-hdbg">
          <div class="content-title">
            <span>快速查询</span>
            <i class="el-icon-arrow-left ky-fr ky-pointer ky-ft16 ky-fw600" @click="quickFilterStatus = false"></i>
          </div>
          <HospAreaDepFilter
            ref="hospAreaDepFilter"
            :hospital-code="formData.hospitalCode"
            @treeChange="treeChange"></HospAreaDepFilter>
        </el-card>
        <el-card shadow="hover" class="qf-box ky-card ky-card-hdbg">
          <div class="content-title">
            <i class="el-icon-arrow-right ky-pointer ky-ft16 ky-fw600" v-show="!quickFilterStatus" @click="quickFilterStatus = true"></i>
            <span>操作记录列表</span>
          </div>
          <el-table
            ref="table"
            v-loading="loading"
            size="medium"
            :data="tableData"
            style="width: 100%"
            border
            class="ky-table"
            highlight-current-row
          >
            <el-table-column align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="warning" size="small" @click.stop="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i> 详情</el-button>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="operatorName" label="操作用户" min-width="115"></el-table-column>
            <el-table-column align="left" prop="depArea" label="影像区域" min-width="83"></el-table-column>
            <el-table-column align="left" prop="dep" label="检查部门"></el-table-column>
            <el-table-column align="left" prop="modality" label="检查设备"></el-table-column>
            <el-table-column align="left" prop="remark1" label="检查机房" min-width="120"></el-table-column>
            <el-table-column align="left" prop="operatorDate" label="记录时间" width="160"></el-table-column>
            <el-table-column align="left" prop="operatorStatus" label="操作类型" min-width="140"></el-table-column>
            <!--  <el-table-column align="left" prop="allcontent" label="操作内容" show-overflow-tooltip>
              <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.allcontent" placement="top-start">
                  <div class="allcontent-class">{{scope.row.allcontent}}</div>
                  </el-tooltip>
              </template>
              </el-table-column> -->
            <el-table-column align="left" prop="ipAddress" label="IP地址" width="180" show-overflow-tooltip></el-table-column>
          </el-table>
          <paginationCont
            :total="totalCount"
            :page.sync="currentPage"
            :limit.sync="pageSize"
            @pagination="changePagenation"
          />
        </el-card>
      </div>
    </div>
    <info-dialog :id="detailId" :dialog-visible.sync="dialogVisible" @myClose="closeEditDialog" :hospital-code="formData.hospitalCode"></info-dialog>
  </div>
</template>

<script>
import { getAppointmentRecordsInfoPages, getDepAreaList, getDepList, getModalityList, getCheckRoomList } from '@/api/api.js'
import paginationCont from '@/components/Pagination/index'
import HospAreaDepFilter from '@/components/treeFilter/hospitalAreaDepTree'
import { operateTypeFlr } from '@/utils/validate'
import dateTime from '@/utils/dateTime.js'
import infoDialog from './infoDialog'
const typeOptions = [
  {
    tabelType: 1,
    value: '预约时段新增',
    label: '预约时段新增'
  },
  {
    tabelType: 1,
    value: '预约时段修改',
    label: '预约时段修改'
  },
  {
    tabelType: 1,
    value: '预约时段删除',
    label: '预约时段删除'
  },
  {
    tabelType: 1,
    value: '预约时段批量修改',
    label: '预约时段批量修改'
  },
  {
    tabelType: 2,
    value: '预约时段模板新增',
    label: '预约时段模板新增'
  },
  {
    tabelType: 2,
    value: '预约时段模板修改',
    label: '预约时段模板修改'
  },
  {
    tabelType: 2,
    value: '预约时段模板删除',
    label: '预约时段模板删除'
  },
  {
    tabelType: 2,
    value: '时段模板批量修改',
    label: '时段模板批量修改'
  }
]
export default {
  name: '',
  components: { paginationCont, infoDialog, HospAreaDepFilter },
  filters: {
    operateTypeFlr
  },
  data() {
    return {
      tabelType: 1,
      rules: {
        timeRange: { type: 'array', required: true, message: '请选择记录时间', trigger: 'change' }
      },
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: [],
        operatorName: '',
        operatorStatus: [],
        timeRange: [],
        depArea: [],
        modality: [],
        checkRoom: []
      },
      operateTypeOptions: [],
      depAreaOptions: [],
      scheduledDepOptions: [],
      modalityOptions: [],
      checkRoomOptions: [],
      loading: false,
      tableData: [],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      detailId: '',
      dialogVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },

      // 快速查询
      quickFilterStatus: true
    }
  },
  watch: {},
  computed: {},
  created() {
    // 1号源操作记录、2模板操作记录
    this.tabelType = this.$route.path === '/schedule/operationRecords' ? 1 : 2
    this.operateTypeOptions = typeOptions.filter(item => {
      return this.tabelType === item.tabelType
    })
    this.$getHospitalList()
  },
  async mounted() {
    this.formData.hospitalCode = this.$store.state.user.hospitalCode || ''
    try {
      this.getDepAreaOptions()
      this.getScheduledDepOptions()
      this.getModalityOptions()
      this.getCheckRoomOptions()
    } catch (err) {
      console.log(err)
    }
    this.$nextTick(() => {
      this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.init()
    })
    this.setDefaultTime()
    // this.search()
  },
  methods: {
    closeRight() {
      this.closeEditDialog()
    },
    frtTime(row, column, cellValue, index) {
      // 处理后台时间
      let time = ''
      if (cellValue) {
        time = cellValue.slice(0, 10)
      }
      return time
    },
    resetParam() {
      // 重置
      this.formData = {
        hospitalCode: this.$store.state.user.hospitalCode,
        dep: [],
        operatorName: '',
        operatorStatus: [],
        timeRange: [],
        depArea: [],
        modality: [],
        checkRoom: []
      }
      // 设置查询默认记录时间
      this.setDefaultTime()
    //   this.search()
    },
    search() {
      // 查询
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    changePagenation() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.loading = true
      let data = {
        ...this.formData,
        operatorStatus: this.formData.operatorStatus.join(','),
        beginDate: this.formData.timeRange[0],
        endDate: this.formData.timeRange[1],
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(','),
        checkRoom: this.formData.checkRoom.join(','),
        tabelType: this.tabelType || 1,
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
      }
      getAppointmentRecordsInfoPages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getDepAreaOptions() {
      /* 影像区域列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode
      }
      return new Promise(async resolve => {
        await getDepAreaList(params).then((res) => {
          if (res.code === 10000) {
            this.depAreaOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(',')
      }
      return new Promise(async resolve => {
        await getDepList(params).then((res) => {
          if (res.code === 10000) {
            this.scheduledDepOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getModalityOptions() {
      /* 检查设备列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(',')
      }
      return new Promise(async resolve => {
        await getModalityList(params).then((res) => {
          if (res.code === 10000) {
            this.modalityOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    getCheckRoomOptions() {
      /* 检查机房列表 */
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(',')
      }
      return new Promise(async resolve => {
        await getCheckRoomList(params).then((res) => {
          if (res.code === 10000) {
            this.checkRoomOptions = res.content.list
            resolve(res)
          }
        })
      })
    },
    async handleChange(val) {
      switch (val) {
        case 'hospital':
          this.depAreaOptions = []
          this.scheduledDepOptions = []
          this.modalityOptions = []
          this.checkRoomOptions = []

          this.formData.depArea = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.checkRoom = []
          this.tableData = []
          this.totalCount = 0

          try {
            await this.getDepAreaOptions()
            this.getScheduledDepOptions()
            this.getModalityOptions()
            this.getCheckRoomOptions()
            this.search()
          } catch (err) {
            console.log(err)
          }
          this.$nextTick(() => {
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.init()
          })
          break
        case 'depArea':
          this.scheduledDepOptions = []
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.dep = []
          this.formData.modality = []
          this.formData.checkRoom = []
          try {
            await this.getScheduledDepOptions()
            this.getModalityOptions()
            this.getCheckRoomOptions()
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          } catch (err) {
            console.log(err)
          }
          break
        case 'dep':
          this.modalityOptions = []
          this.checkRoomOptions = []
          this.formData.modality = []
          this.formData.checkRoom = []
          try {
            await this.getModalityOptions()
            this.getCheckRoomOptions()
            this.$refs.hospAreaDepFilter && this.$refs.hospAreaDepFilter.reset()
          } catch (err) {
            console.log(err)
          }
          break
        case 'modality':
          this.checkRoomOptions = []
          this.formData.checkRoom = []
          try {
            await this.getCheckRoomOptions()
          } catch (err) {
            console.log(err)
          }
          break
        default:
          break
      }
    },
    setDefaultTime() {
      /* 时间格式还没改 */
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      let startTime = dateTime.formartDate(start)
      let endTime = dateTime.formartDate(end)
      this.formData.timeRange = [startTime, endTime]
    },
    handleEdit(i, row) {
      this.$refs.table.setCurrentRow(row)
      this.detailId = row.id
      this.dialogVisible = true
    },
    closeEditDialog() {
      this.dialogVisible = false
    },

    // 快速查询返回
    treeChange(data) {
      let area = data.area
      let dep = data.dep
      let areaChange = this.formData.depArea.length === 1 && this.formData.depArea[0] !== area
      this.formData.depArea = area ? [area] : []
      this.formData.dep = dep ? [dep] : []
      if (areaChange) {
        this.getScheduledDepOptions()
      }
      this.formData.modality = []
      this.formData.checkRoom = []
      this.getModalityOptions()
      this.getCheckRoomOptions()
      this.search()
      this.closeEditDialog()
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .param-type_input{
       /deep/ .el-input__inner{
            width: 180px;
        }
    }
    .content-title{
        margin-left:4px;
        margin-bottom: 16px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
    }
    .allcontent-class{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
.ky-form-inline-sm .el-form-item .el-date-editor--daterange.el-input__inner{
    width: 456px;
}
/* .el-table /deep/ td {
  padding: 4px 0px;
}
.el-table /deep/ th {
  padding: 8px 0px;
} */
</style>
